<!--渐变-->
<script setup>
defineOptions({
  name:'jb'
})
import {onMounted} from "vue";
onMounted(() => {
  const swiperjb = new Swiper(".jb", {
    // spaceBetween: 30,
    effect: "fade",
    fadeEffect: {
      crossFade: true,
    },
    // navigation: {
    //   nextEl: ".swiper-button-next",
    //   prevEl: ".swiper-button-prev",
    // },
    // pagination: {
    //   el: ".swiper-pagination",
    //   clickable: true,
    // },
  });
});
</script>

<template>
  <div class="swiper jb">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img  class="imageStyle" src="@/assets/BZ/1.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/2.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/3.jpg"></div>
      <div class="swiper-slide"><img class="imageStyle"  src="@/assets/BZ/4.png"></div>
      <div class="swiper-slide"><img class="imageStyle" src="@/assets/BZ/5.jpg"></div>
    </div>
<!--    <div class="swiper-button-next"></div>-->
<!--    <div class="swiper-button-prev"></div>-->
<!--    <div class="swiper-pagination"></div>-->
  </div>

</template>

<style scoped lang="scss">
.imageStyle{
  display: block;
  width: 20rem;
  height: 20rem;
  object-fit: cover;
}
.imageStyle1{
  display: block;
  width: 5rem;
  height: 5rem;
  object-fit: cover;
}
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18rem;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

//.swiper-slide img {
//  display: block;
//  width: 20rem;
//  height: 20rem;
//  object-fit: cover;
//}



.swiper {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.sl2 {
  height: 80%;
  width: 100%;
}

.sl1 {
  height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.sl1 .swiper-slide {
  width: 25%;
  height: 100%;
  opacity: 0.4;
}

.sl1 .swiper-slide-thumb-active {
  opacity: 1;
}

//.swiper-slide img {
//  display: block;
//  width: 20rem;
//  height: 20rem;
//  object-fit: cover;
//}
</style>
